/*
 * spa.shell.css
 * Shell styles
*/

.spa-shell-head, .spa-shell-head-logo, .spa-shell-head-acct,
.spa-shell-head-search, .spa-shell-main, .spa-shell-main-nav,
.spa-shell-main-content, .spa-shell-foot, .spa-shell-chat,
.spa-shell-modal {
    position : absolute;
}
.spa-shell-head {
    top    : 0;
    left   : 0;
    right  : 0;
    height : 40px;
}
.spa-shell-head-logo {
    top        : 4px;
    left       : 4px;
    height     : 32px;
    width      : 128px;
    background : orange;
}
.spa-shell-head-acct {
    top        : 4px;
    right      : 0;
    width      : 64px;
    height     : 32px;
    background : green;
}
.spa-shell-head-search {
    top        : 4px;
    right      : 64px;
    width      : 248px;
    height     : 32px;
    background : blue;
}

.spa-shell-main {
    top    : 40px;
    left   : 0;
    bottom : 40px;
    right  : 0;
}
.spa-shell-main-content,
.spa-shell-main-nav {
    top    : 0;
    bottom : 0;
}
.spa-shell-main-nav {
    width  : 250px;
    background : #eee;
}
.spa-x-closed .spa-shell-main-nav {
    width  : 0;
}

.spa-shell-main-content {
    left  : 250px;
    right : 0;
    background : #ddd;
}
.spa-x-closed .spa-shell-main-content {
    left : 0;
}

.spa-shell-foot {
    bottom : 0;
    left   : 0;
    right  : 0;
    height : 40px;
}
.spa-shell-chat {
    bottom     : 0;
    right      : 0;
    width      : 300px;
    height     : 15px;
    background : red;
    z-index    : 1;
    cursor: pointer;
    border-radius: 5px 0 0;
}
.spa-shell-chat:hover{
    background:#a00;
}
.spa-shell-modal {
    margin-top    : -200px;
    margin-left   : -200px;
    top           : 50%;
    left          : 50%;
    width         : 400px;
    height        : 400px;
    background    : #fff;
    border-radius : 3px;
    z-index       : 2;
}
